<template>
  <div class="page-box-row-left">
    <FormBlock :title="treeObj.treeName" direction="column" class="left-area">
      <AutoComplete
        v-model="searchValue"
        @on-search="onSearch"
        @on-change="onChange"
        @on-select="onSelectSearch"
        @on-clear="onClear"
        :placeholder="$t('module.treeManage.warning.enterNodeNameCode')"
        style="padding: 0 10px; margin: auto; display: block;"
        icon="md-search"
        clearable
      >
        <Option v-for="(option, index) in searchResult" :value="option" :key="index">{{option}}</Option>
        <p
          class="complete-more get-complete-more"
          v-if="searchResult.length >= 10 && isShowMore"
          @click="showMore"
        >{{ $t('common.showMore') }}</p>
      </AutoComplete>
      <Spin v-if="isShowSpin">{{ searchHint }}</Spin>
      <el-tree
        ref="tree"
        :data="rootNode"
        :props="treeProps"
        node-key="nodeCode"
        :default-expanded-keys="expandedKeys"
        :load="loadData"
        lazy
        :render-content="renderContent"
        :expand-on-click-node="false"
        class="tree-box"
        icon-class="ivu-icon-ios-arrow-forward"
        highlight-current
      ></el-tree>
      <!-- <el-tree
        v-show="searchValue"
        :data="rootNode"
        :props="treeProps"
        class="tree-box"
        :render-content="renderContent"
        highlight-current
      ></el-tree>-->
    </FormBlock>
    <FormBlock :title="editAreaTitle" direction="column">
      <Form
        ref="treeNodeForm"
        :model="modelForm"
        :rules="rules"
        label-position="right"
        :label-width="90"
      >
        <div class>
          <Row :gutter="32" class="code-row-bg">
            <Col span="11">
              <Form-item prop="nodeName" :label="$t('module.treeManage.nodeName')">
                <Input
                  :placeholder="$t('module.treeManage.warning.enterNodeName')"
                  v-model.trim="modelForm.nodeName"
                  :maxlength="50"
                  :disabled="canNotBeEdit"
                  v-bind:readonly="canNotBeEdit"
                  
                ></Input>
              </Form-item>
            </Col>
            <Col span="11">
              <Form-item prop="nodeCode" :label="$t('module.treeManage.nodeCode')">
                <Input
                  :placeholder="$t('module.treeManage.warning.enterNodeCode')"
                  v-model.trim="modelForm.nodeCode"
                  @on-blur="onCodeChange"
                  :maxlength="50"
                  :disabled="modelForm.id != ''"
                  v-bind:readonly="canNotBeEdit"
                  
                ></Input>
              </Form-item>
            </Col>
          </Row>
          <Row :gutter="32" class="code-row-bg">
            <Col span="11">
              <Form-item prop="nodeType" :label="$t('module.treeManage.nodeType')">
                <Select
                  transfer
                  :placeholder="$t('module.treeManage.warning.selectNodeType')"
                  v-model="modelForm.nodeType"
                  :disabled="modelForm.id != ''"
                  
                  style="width: 100%;"
                  @on-change="onNodeTypeChange"
                >
                  <Option
                    v-for="(nodeType, index) in nodeTypeList"
                    :value="nodeType.code"
                    :key="index"
                  >{{ nodeType.name }}</Option>
                </Select>
              </Form-item>
            </Col>
            <Col span="11">
              <Form-item prop="orderNo" :label="$t('module.treeManage.orderNo')">
                <InputNumber
                  style="width: 100%;"
                  :min="0"
                  :max="1000"
                  v-model="modelForm.orderNo"
                  
                  :disabled="canNotBeEdit"
                ></InputNumber>
              </Form-item>
            </Col>
          </Row>
          <!-- <Row :gutter="32" class="code-row-bg">
            <Col span="22">
            <Form-item prop="effectDate" :label="$t('module.treeManage.validity')">
              <DatePicker :value="effectDate" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="Select date" style="width:100%" v-bind:readonly="canNotBeEdit" @on-change="changeEffectDate"></DatePicker>
            </Form-item>
            </Col>
          </Row>-->
          <Row :gutter="32" class="code-row-bg">
            <Col span="22">
              <Form-item prop="nodePath" :label="$t('module.treeManage.nodePath')">
                <Input v-model="modelForm.nodePath" :disabled="true" :readonly="true" ></Input>
              </Form-item>
            </Col>
          </Row>
          <Row :gutter="32" class="code-row-bg">
            <Col span="22">
              <Form-item prop="nodeDesc" :label="$t('module.treeManage.nodeDesc')">
                <Input
                  type="textarea"
                  :rows="4"
                  :maxlength="100"
                  v-model="modelForm.nodeDesc"
                  placeholder
                  :disabled="canNotBeEdit"
                  v-bind:readonly="canNotBeEdit"
                  
                ></Input>
              </Form-item>
            </Col>
          </Row>
          <!-- <form-creator ref="formCreator" :formConfig="formConfig" /> -->
          <!-- <h1>uuii</h1> -->
          <div
            style="width: 92%; padding-left: 20px;"
            :class="{ visibility: canNotBeEdit }"
            v-if="this.modelForm.id"
          >
            <FormCreate
              :templateId.sync="modelForm.attributeContext"
              templateType="TREE_CODE"
              :attributeValue="modelForm"
              :fApi.sync="fApi"
              :options="fcOption"
              :isEdit="!canNotBeEdit"
              :selectWidth="'100%'"
              class="create-form-wrap90"
            />
          </div>
          <div style="width: 92%; padding-left: 20px;" :class="{ visibility: canNotBeEdit }" v-else>
            <FormCreate
              ref="formCreate"
              :isAdd="isAdd"
              :templateId.sync="modelForm.attributeContext"
              templateType="TREE_CODE"
              :attributeValue="modelForm"
              :fApi.sync="fApi"
              :options="fcOption"
              :isEdit="!canNotBeEdit"
              :selectWidth="'100%'"
              class="create-form-wrap90"
            />
          </div>
          <Row
            :gutter="22"
            style="margin-top: 15px;"
            class="code-row-bg tree-node-button"
            v-show="!canNotBeEdit"
          >
            <Col span="20">
              <RPButton
                optType="save"
                style="margin-left: 80px;"
                :loading="saveLoading"
                @click="save"
              />
            </Col>
          </Row>
        </div>
      </Form>
    </FormBlock>
  </div>
</template>
<script>
import treeAPI from "@/api/treeApi.js";
import valueSetAPI from "@/api/valueSetAPI.js";
import { searchDelayTime,codeReg } from "@/const.js";
import treeNodeFormConfig1 from "./TreeNodeFormConfig1.json";
import treeNodeFormConfig2 from "./TreeNodeFormConfig2.json";
import treeNodeFormConfig3 from "./TreeNodeFormConfig3.json";
import { cloneDeep } from "lodash";
import FormCreate from "@/components/common/FormCreate";
import locales from "./locales.js";

const defaultValue = {
  extend1: "",
  extend2: "",
  extend3: "",
  extend4: ""
};

export default {
  mixins: [locales],

  components: { FormCreate },
  props: {
    treeObj: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    const validateNodeName = (rule, value, callback) => {
      // if (this.canNotBeEdit) {
      //   //当明细页面不允许编辑时，不做合法性校验
      //   callback();
      // }
      if (value == null || value === "" || value != value.trim()) {
        callback(new Error(this.$t("module.treeManage.warning.enterTreeName")));
      }
      callback();
    };
    const validateNodeCode = (rule, value, callback) => {
      // if (this.canNotBeEdit) {
      //   //当明细页面不允许编辑时，不做合法性校验
      //   callback();
      // }
      if (value == null || value === "") {
        callback(new Error(this.$t("module.treeManage.warning.enterTreeCode")));
      } else if (value.length > 30) {
        callback(new Error(this.$t("common.warning.codeCheckLength")));
      } else if (!new RegExp(codeReg).test(value)) {
        callback(new Error(this.$t("common.warning.codeCheckCharacter")));
      } else if (value.indexOf(" ") != -1) {
        callback(new Error(this.$t("module.treeManage.warning.treeCodeHaveSpace")));
      }
      callback();
    };
    return {
      isShowMore: true,
      isAdd: false,
      nodeTypeList: [],
      editAreaTitle: this.$t("module.treeManage.nodeDetail"),
      isRootNode: false,
      canNotBeEdit: true,
      saveLoading: false,
      rootNode: [],
      currentNode: null,
      parentNode: null,
      parentNodePath: "",
      modelForm: {
        id: "",
        nodeName: "",
        nodeCode: "",
        nodeType: "",
        orderNo: 0,
        nodePath: "",
        nodeDesc: "",
        parentId: "",

        // orgFrom: "", //数据来源（0，手工；1:同步）
        enabled: 1, //有效性（0，无效；1:有效）
        nodeLevel: 0,
        startDate: "2019-05-21",
        endDate: "2019-05-21",
        attributeContext: ""
      },
      rules: {
        nodeName: [{ validator: validateNodeName, trigger: "blur", required: true }],
        nodeCode: [{ validator: validateNodeCode, trigger: "blur", required: true }],
        nodeType: [{ required: true, message: this.$t("module.treeManage.warning.enterTreeType"), trigger: "blur" }]
      },
      buttonProps: {
        type: "default",
        size: "small"
      },
      searchValue: "",
      treeList: [],
      searchResult: [],
      searchResultNode: [],
      pressCount: 0,
      isShowSpin: false,
      searchHint: "",
      formConfig: cloneDeep(treeNodeFormConfig2),
      fApi: null,
      treeProps: {
        label: "nodeCode",
        children: "childrenDept",
        isLeaf: "isLeaf"
      },
      expandedKeys: [],
      pageNum: 1
    };
  },
  computed: {
    fcOption() {
      return {
        global: {
          "*": {
            col: {
              span: 12
            },
            props: {
              // width: "355px",
              disabled: this.canNotBeEdit
            }
          }
        },
        form: {
          labelWidth: 90,
          size: "default"
        }
      };
    }
  },
  created: function() {},

  mounted: function() {
    this.init();
  },
  methods: {
    // 搜索结果大于10条，点击查看更多
    showMore() {
      this.getSelectNode(this.searchValue);
    },
    getSelectNode(value) {
      // 点击查看更多，pageNum改为2，从第二页开始查询
      this.pageNum++;
      if (value && value.indexOf("/") == -1) {
        let param = {
          condition: {
            nodeCode: this.treeObj.treeCode,
            nodeName: value
          },
          pageNum: this.pageNum,
          pageSize: 10
        };
        treeAPI.selectTreeNode(param).then(data => {
          if (data.records.length > 0) {
            let nodeNamePathArr = [];
            // let nodeArr = [];
            this.searchResultNode = this.searchResultNode.concat(data.records);
            data.records.forEach(node => {
              nodeNamePathArr.push(node.nodeNamePath); // 查询出来的nodeNamePath形成的一维数组

              // let data = {};
              // data.nodeNamePath = node.nodeNamePath;
              // data.nodePath = node.nodePath;
              // nodeArr.push(data); // 查询出来的nodeNamePath和nodePath形成的二维数组
            });
            this.$nextTick(() => {
              this.searchResult = this.searchResult.concat(nodeNamePathArr); // AutoComplete组件显示的数据
              // this.treeList = this.treeList.concat(nodeArr);
            });
          } else {
            // 查询结果，data.records为空数组时，隐藏查看更多按钮
            this.isShowMore = false;
          }
        });
      }
    },
    init() {
      this.initTreeNodeType();
      this.currentNode = {
        ...this.treeObj,
        nodeName: this.treeObj.treeName,
        nodeCode: this.treeObj.treeCode,
        nodePath: this.treeObj.treeCode,
        nodeDesc: this.treeObj.treeDesc,
        title: this.treeObj.treeName,
        selected: true,
        children: []
      };
      this.rootNode.push(this.currentNode);
      this.$nextTick(function() {
        this.selectFirstNode();
      });
    },
    initTreeNodeType() {
      valueSetAPI
        .GetValueSetByCodeAndParentKey({ code: "treeNodeType", parentKey: this.treeObj.treeType })
        .then(data => {
          this.nodeTypeList.splice(0)
          for (const nodeType of data) {
            this.nodeTypeList.push({
              id: nodeType.id,
              code: nodeType.vsiKey,
              name: nodeType.vsiValue
            });
          }
          this.modelForm.nodeType = data[0].vsiKey;
        });
    },
    loadData(node, resolve) {
      if (node.level == 0) {
        // 隐藏根节点
        return;
      }
      // 是叶子节点不进行查询
      if (node.isLeaf) {
        resolve([]);
      }
      treeAPI.queryTreeNode(node.data.id).then(children => {
        let data = [];
        for (const child of children) {
          if (child.endNode == "Y") {
            data.push({ ...child, title: child.nodeName, children: [], isLeaf: true });
          } else {
            data.push({ ...child, title: child.nodeName, children: [] });
          }
        }
        resolve(data);
      });
    },
    renderContent(h, { node, data, store }) {
      let isRootNode = node.level == 1;
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%"
          },
          class: ["tree-row", data.selected ? "tree-row-selected" : ""]
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "ios-paper-outline"
              },
              style: {
                marginRight: "8px",
                fontSize: "14px"
              }
            }),
            h(
              "span",
              {
                class: "ivu-tree-title",
                style: {
                  fontSize: "14px"
                },
                on: {
                  click: () => {
                    this.onNodeSelected(data);
                  }
                },
                attrs: {
                  title: data.title
                }
              },
              data.nodeName
            )
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                // position: "absolute",
                // right: "2px"
                width: "40px"
              }
            },
            [
              h(
                "Button",
                {
                  props: Object.assign({}, this.buttonProps),
                  style: {
                    padding: "1px 3px",
                    borderRadius: "3px"
                  },
                  on: {
                    click: () => {
                      this.append(node, data);
                    }
                  }
                },
                [
                  h("i", {
                    class: "el-icon-plus",
                    style: {
                      lineHeight: 1.5
                    }
                  })
                ]
              ),
              h(
                "Button",
                {
                  props: Object.assign({}, this.buttonProps),
                  class: isRootNode ? "rootNode" : "",
                  style: {
                    padding: "1px 3px 2px",
                    borderRadius: "3px"
                  },
                  on: {
                    click: () => {
                      this.remove(node, data, store);
                    }
                  }
                },
                [
                  h("i", {
                    class: "el-icon-delete",
                    style: {
                      lineHeight: 1.5
                    }
                  })
                ]
              )
            ]
          )
        ]
      );
    },
    append(node, data) {
      this.isAdd = true;
      if (this.$refs.formCreate && this.$refs.formCreate.ruleDataVal) {
        this.$refs.formCreate.ruleDataVal = "";
      }
      this.initDynamicForm();
      // 展开当前节点，否则新增子节点刷新不到树上
      this.expandedKeys = [data.nodeCode];
      this.$set(data, "selected", true);
      this.$set(this.currentNode, "selected", false);
      this.currentNode = data;
      data.selected = true;
      this.parentNode = data;
      this.canNotBeEdit = false;
      this.editAreaTitle = this.$t("module.treeManage.addNode");
      this.modelForm = Object.assign({}, this.modelForm, {
        id: "",
        nodeName: "",
        nodeCode: "",
        nodeType: "",
        orderNo: 0,
        nodePath: data.nodePath,
        nodeDesc: "",
        parentId: data.id,
        enabled: 1,
        nodeLevel: 0
      });

      this.parentNodePath = data.nodePath;
      // this.formFAPI.setValue({
      //   extend1: "",
      //   extend2: "",
      //   extend3: "",
      //   extend4: ""
      // });

      // this.formFAPI.clearValidateState();
    },
    remove(node, data, store) {
      this.$confirm
        .warning(this.$t("common.warning.confirmToDelete"))
        .then(() => {
          treeAPI.deleteTreeNode([data.id]).then(response => {
            this.$message.success({
              content: this.$t("common.deleteSuccess"),
              duration: 3
            });
            this.onClear();
            // const parent = node.parent.data;
            // this.$set(this.currentNode, "selected", false);
            // store.remove(data);
            // // parent.selected = true;
            // this.$set(parent, "selected", true);
            // this.currentNode = parent;
            // this.onNodeSelected(parent);
          });
        })
        .catch(_ => _);
    },
    selectFirstNode() {
      this.canNotBeEdit = true;
      this.modelForm = this.rootNode[0];
      this.currentNode = this.rootNode[0];
      this.$refs.tree.setCurrentNode(this.currentNode);
    },
    onNodeSelected(data, node, nodeElement) {
      this.lastNodeType = data.nodeType;
      this.initDynamicForm();
      if (data.nodeCode == this.rootNode[0].nodeCode) {
        this.canNotBeEdit = true;
        this.editAreaTitle = this.$t("module.treeManage.nodeDetail");

        this.modelForm = data;
        // this.$nextTick(() => {
        //   this.formFAPI.setValue(Object.assign({}, defaultValue, node.attributeValue));
        //   this.formFAPI.clearValidateState();
        //   this.$refs["treeNodeForm"].validate();
        // });
      } else {
        this.canNotBeEdit = false;
        this.editAreaTitle = this.$t("module.treeManage.editNode");

        treeAPI.getTreeNodedetail({ id: data.id }).then(data => {
          this.modelForm = data;
          // this.$nextTick(() => {
          //   this.formFAPI.setValue(Object.assign({}, defaultValue, data.attributeValue));
          //   this.formFAPI.clearValidateState();
          //   this.$refs["treeNodeForm"].validate();
          // });
        });
      }

      this.$set(this.currentNode, "selected", false);
      this.$set(data, "selected", true);
      this.currentNode = data;

      // this.modelForm.nodeName = node.title;
      // this.modelForm.nodeCode = node.nodeCode ? node.nodeCode : node.treeCode;
      // this.modelForm.nodeType = node.nodeType;
      // this.modelForm.orderNo = node.orderNo;
      // this.modelForm.nodePath = node.nodePath;
      // this.modelForm.nodeDesc = node.nodeDesc ? node.nodeDesc : node.treeDesc;
    },
    validExtendAttr() {
      const { fApi } = this;
      return new Promise(resolve => {
        fApi.validate(
          () => resolve(1),
          () => resolve(0)
        );
      });
    },
    save() {
      this.$refs["treeNodeForm"].validate(async valid => {
        if (this.fApi && this.fApi.formData) {
          this.modelForm.attributeValue = this.fApi.formData();
          // const extendValid = await this.validExtendAttr();
          // if (extendValid === 0) return;
        }
      const newFormData = {};
        if (this?.fApi?.formData) {
          const formData = this.fApi.formData();
          const rules = this.fApi.rule;
          for (const r of rules) {
            newFormData[r.matchColumn] = r.type === 'checkbox'
              ? JSON.stringify(formData[r.field])
              : formData[r.field];
          }
        }
        const requestParams = Object.assign({}, this.modelForm, newFormData);
        // 验证扩展属性
        if (valid) {
          // console.log(this.modelForm.attributeValue)
          this.saveLoading = true;
          // 保存扩展属性
          // this.modelForm.attributeValue = this.formFAPI.formData();
          if (this.modelForm.id) {
            treeAPI
              .updateTreeNode(requestParams)
              .then(data => {
                this.saveLoading = false;
                this.$message.success({
                  content: this.$t("common.updateSuccess"),
                  duration: 3
                });
                this.modelForm.title = this.modelForm.nodeName;
                this.currentNode.title = this.modelForm.nodeName;
                this.onClear();
              })
              .catch(error => {
                this.saveLoading = false;
              });
          } else {
            treeAPI
              .addTreeNode(requestParams)
              .then(data => {
                this.saveLoading = false;
                this.modelForm = data;
                this.editAreaTitle = this.$t("module.treeManage.editNode");
                this.onClear();
                this.$message.success({
                  content: this.$t("common.createSuccess"),
                  duration: 3
                });
              })
              .catch(error => {
                this.saveLoading = false;
              });
          }
        }
      });
    },
    onCodeChange() {
      this.modelForm.nodePath = this.parentNodePath + "/" + this.modelForm.nodeCode;
    },
    onSearch(value) {
      //当重新搜索时，查看更多pageNum改为1,  isShowMore改为true, searchResultNode改为[]
      this.searchResultNode = [];
      this.pageNum = 1;
      this.isShowMore = true;

      // this.treeList = [];
      this.searchResult = [];

      if (value && value.indexOf("/") == -1) {
        this.pressCount++;
        let param = {
          condition: {
            nodeCode: this.treeObj.treeCode,
            nodeName: value
          },
          pageNum: 1,
          pageSize: 10
        };
        // 延时查询
        setTimeout(() => {
          if (this.pressCount == 1) {
            this.pressCount = 0;
            this.isShowSpin = true;
            this.searchHint = this.$t("module.treeManage.search");
            treeAPI.selectTreeNode(param).then(data => {
              // 查询完时，查询条件已清空，不再显示查询结果
              if (this.searchValue == "") {
                this.isShowSpin = false;
                this.searchHint = "";
                return;
              }
              this.searchResultNode = data.records;
              if (data.records.length > 0) {
                this.isShowSpin = false;
                this.searchHint = "";
                data.records.forEach(node => {
                  this.searchResult.push(node.nodeNamePath); // 由nodeNamePath组成的一维数组
                  // let data = {};
                  // data.nodeNamePath = node.nodeNamePath;
                  // data.nodePath = node.nodePath;
                  // this.treeList.push(data);
                });
              } else {
                this.isShowSpin = true;
                this.searchHint = this.$t("module.treeManage.noResult");
              }
            });
          } else {
            this.pressCount--;
          }
        }, searchDelayTime);
      }
    },
    onChange(value) {
      if (!value) {
        this.onClear();
      }
    },
    onSelectSearch(value) {
      this.expandedKeys = [];
      this.$refs.tree.store.lazy = false;
      let selectedNode = this.searchResultNode.find(node => {
        return node.nodeNamePath == value;
      });
      this.onNodeSelected(selectedNode);
      this.getParentTreeByTreeNodePath({ nodePath: selectedNode.nodePath }, selectedNode);
    },
    getParentTreeByTreeNodePath(nodePath, selectedNode) {
      treeAPI.getParentTreeByTreeNodePath(nodePath).then(data => {
        this.rootNode = data;
        this.$nextTick(() => {
          this.expandedKeys = [selectedNode.nodeCode];
          this.$refs["tree"].setCurrentKey(this.expandedKeys[0]);
        });
      });
    },
    onClear() {
      // 选中根节点
      // this.selectFirstNode();
      // 隐藏提示信息
      this.searchValue = "";
      this.$refs.tree.store.lazy = true;
      this.rootNode = [];
      this.isShowSpin = false;
      this.searchHint = "";
      // 清空查询结果
      this.searchResult = [];
      this.searchResultNode = [];
      this.init();
    },
    initDynamicForm() {
      const value = this.lastNodeType;
      if (value == "hr_bbb") {
        this.formConfig = cloneDeep(treeNodeFormConfig2);
      } else if (value == "hr_ccc") {
        this.formConfig = cloneDeep(treeNodeFormConfig3);
      } else {
        this.formConfig = cloneDeep(treeNodeFormConfig1);
      }
    },
    onNodeTypeChange(value) {
      this.lastNodeType = value;
      this.initDynamicForm();
    },
    // 验证扩展属性
    formCreatorValidate() {
      let result = false;
      this.formFAPI.validate(
        () => {
          result = true;
        },
        () => {
          result = false;
        }
      );
      return result;
    }
  },
  watch: {
    searchValue: function(value) {
      if (!value) {
        this.onClear();
      }
    }
  },
  directives: {}
};
</script>

<style lang="less" scoped>
.form-block {
  .block-body {
    width: calc(~"100% - 1px");
    .ivu-tree {
      height: calc(~"100% - 36px");
    }
  }
}
.page-box-row-left {
  height: 100%;
  .left-area {
    width: 28%;
    overflow-x: hidden;
    height: calc(~"100% - 56px");
  }
}
</style>
<style lang="less">
.get-complete-more {
  padding: 7px 16px;
  color: #ff6f4b;
  cursor: pointer;
}
.tree-box {
  display: inline-block;
  width: 100%;
  .ivu-btn:focus {
    box-shadow: none;
  }
  button {
    border: 0px;
    background-color: transparent;
    font-size: 14px;
    color: #ff6f4b;
    font-weight: bold;
  }
  .el-tree-node {
    button:hover {
      background-color: #fdf0ef;
      color: #ff6f4b;
    }

    .tree-row {
      padding: 3px 0;
      button {
        visibility: hidden;
      }
      &:hover {
        button {
          visibility: visible;
        }
      }
    }
  }

  .ivu-tree-title {
    vertical-align: middle !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: calc(~"100% - 100px");
  }
  .ivu-tree-title:hover {
    background-color: #fdf0ef;
    color: #ff6f4b;
  }
  .rootNode {
    visibility: hidden !important;
  }
}
.tree-node-button {
  button {
    font-size: 14px;
    height: 34px;
    padding: 3px 23px;
    border-radius: 0px;
    margin-right: 18px;
  }

  // 第一个按钮样式
  button:first-child {
    color: #fff;
    background-color: #ff6f4b;
    border-color: #ff6f4b;
  }
}
.visibility {
  visibility: hidden;
}
.page-box-row-left {
  .myForm {
    .ivu-form-item {
      .ivu-form-item-content {
        margin-left: 0px !important;
      }
    }
  }
  .ivu-select-dropdown {
    max-height: 330px !important;
    min-width: auto !important;
    width: 96% !important;
    .ivu-select-dropdown-list {
      width: fit-content;
      .ivu-select-item:hover {
        background: #fff !important;
      }
    }
  }
  .ivu-select-item {
    white-space: nowrap !important;
  }
}
</style>
